/* 
sass LunamareStartium.scss LunamareStartium.min.css
*/
@import "_utils.scss";


$animationSpeed: 300ms;
$edgeRounding: 5px;
$padding: 15px;

$headerFont: "Comic Sans MS", cursive, sans-serif;
$textFont: "Comic Sans MS", cursive, sans-serif;
$tabFont: Impact, Charcoal, sans-serif;

$largeFontSize: 17pt;
$smallFontSize: 12pt;

$backgroundColor: #000214;
$notebookCoverColor: #8637c7;
$notebookTabColor: #242a6d;
$notebookTabTextColor: #ff618f;
$notebookPaperColor: #fba2c2;
$notebookHeaderColor: #462ea7;
$notebookTextColor: #ff2a5e;
$notebookAccentColor: #b98afd;


/* Color Scheme */


$strongColor: white;

html {
    @include fullSize();
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        @include fullSize();
        background-color: $backgroundColor;
        #main {
            display: inline-flex;
            width: 900px;
            height: 900px;
            position: relative; /* mark as anchor for absolute children */
            /*background-color: green; /* transparent once done debugging */
            
            
        
        }
    }
}

#main {
    #album-cover {
        pointer-events: none;
        background-image: url("./albumcover-1.png");
        background-position: center;
        background-size: cover;
        background-color: $notebookCoverColor;
        border-radius: $edgeRounding;
        @include fullSize();
        position: absolute;
        top: 0px;
        left: 0px;
        
        z-index: 2;
        
        @include crossbrowser("transition", transform $animationSpeed);
        @include crossbrowser("transition-timing-function", ease-in);
        @include crossbrowser("transform-origin", center left);        
    }

    &:hover {
        #album-cover {
            // @include crossbrowser("transform", scale(0.7, 1) translate(-25%, 0px));
            // @include crossbrowser("transform", scale(0.6, 1));
            transition: opacity 0.6s;
            opacity: 0;
        }
    }
}

#table-of-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @include fullSize();
    
    z-index: 1;
    
    #priority {
        height: 100%;
        width: 230px;
        position: absolute;
        top: 0px;
        right: -50px;
        
        z-index: 1;
        
        > div {
            display: inline-block;
            height: 200px;
            width: 200px;
            margin: $padding;
            padding: $padding;
            background-color: $notebookTabColor;
            border-radius: $edgeRounding;
            @include crossbrowser("transform", rotate(90deg));
            @include crossbrowser("transform-origin", center center);        
            
            header {
                color: $notebookTabTextColor;
                font-family: $tabFont;
                font-size: $largeFontSize;
                @include crossbrowser("transform", scale(1.3, 1));
                text-align: center;
            }

        
        }
    }
    
    #misc {
        align-self: flex-end;
        height: 100%;
        width: 900px - 2 * $padding;
        position: relative;
        background-color: $notebookPaperColor;
        z-index: 2;
        border-radius: $edgeRounding;
        padding: $padding;
    }
        
    .group {
        /*background-color: gray;*/
        header {
            text-align: center;
            font-size: $largeFontSize;
            font-family: $headerFont;
            font-weight: 600;
            color: $notebookHeaderColor;
        }
        ul {
            text-align: center;
            columns: 2;
            -webkit-columns: 2;
            -moz-columns: 2;
            list-style: none;
            margin-top: 4px;
            li {
                font-size: $smallFontSize;
                font-family: $textFont;
                color: $notebookTextColor;
                
                text-decoration: underline;
                text-decoration-color: $notebookAccentColor;
                
                &::before {
                    content: "\2022";  /* \2022 is the CSS Code/unicode for a bullet */
                    color: $notebookAccentColor;
                    font-weight: bold; /* If you want it to be bold */
                    display: inline-block; /* Needed to add space between the bullet and the text */
                    width: 1em; /* Also needed for space (tweak if needed) */
                    margin-left: -1em; /* Also needed for space (tweak if needed) */
                }
            }
        }
    }
}



